<script setup lang="ts">
import type { Introduction01ComponentMeta } from '@/definitions/type'
import { EWebDesignerComponentBackground, EWebDesignerComponentTheme } from '@/api/designer/model'
import Condition from '@/components/Condition/Condition.vue'
import SliderProp from '@/components/SliderProp/SliderProp.vue'
import { useCompStyle } from '@/hooks/useCompStyle'
import { followThemeValue } from '@/utils/constants'
import { SpaceOption, spaceOptions } from '@/utils/space'
import { Input, Radio, RadioButton, RadioGroup, Space } from 'ant-design-vue'

defineOptions({
  name: 'CompStyle',
  inheritAttrs: true,
})
const { activeRender, handleBgChange, handleChooseFile, handleSpaceModeChange, initialBgColor, spaceMobile, spacePC } = useCompStyle<Introduction01ComponentMeta>()
</script>

<template>
  <div v-if="activeRender" class="setting-block">
    <div class="field-title mt-6">
      组件样式
    </div>
    <Space :size="20" direction="vertical" style="width: 100%;">
      <div v-if="activeRender.config.theme === 0 || activeRender.config.theme === 1" class="inline-control">
        <div class="inline-control-label">
          组件主题
        </div>
        <div class="inline-control-block">
          <RadioGroup v-model:value="activeRender.config.theme">
            <Radio :value="EWebDesignerComponentTheme.深色">
              深色
            </Radio>
            <Radio :value="EWebDesignerComponentTheme.浅色">
              浅色
            </Radio>
          </RadioGroup>
        </div>
      </div>
      <div v-if="activeRender.config.background !== null || activeRender.config.background !== undefined" class="inline-control">
        <div class="inline-control-label">
          背景颜色
        </div>
        <div class="inline-control-block">
          <RadioGroup v-model:value="activeRender.config.background" @change="handleBgChange">
            <Radio :value="EWebDesignerComponentBackground.纯色">
              颜色
            </Radio>
            <Radio :value="EWebDesignerComponentBackground.图片">
              图片
            </Radio>
            <Radio :value="EWebDesignerComponentBackground.无背景">
              无背景
            </Radio>
            <Radio :value="EWebDesignerComponentBackground.主题色">
              跟随主题
            </Radio>
          </RadioGroup>
        </div>
      </div>
      <Condition v-if="activeRender.config.background === EWebDesignerComponentBackground.纯色" :arrow-left="78">
        <div class="flex flex-row items-center gap-2">
          <span class="text-second-app text-sm">色值</span>
          <div
            class="flex flex-row items-center gap-2 px-3 border border-solid border-[var(--app-color-border)] w-160px"
          >
            <div
              class="box-border w-4 h-4 flex-none"
              :style="{ backgroundColor: activeRender.config.backgroundValue }"
            />
            <Input
              v-model:value="activeRender.config.backgroundValue" :bordered="false" class="text-main-app"
              placeholder="#RRGGBB"
            />
          </div>
          <!-- <div class="flex flex-row items-center gap-2 px-3 border border-solid border-[var(--app-color-border)]">
            <Input :bordered="false" v-model:value="activeRender.config.backgroundValue" type="color" class="color-control-input" />
            <Input :bordered="false" v-model:value="activeRender.config.backgroundValue" />
          </div> -->
          <span
            class="cursor-pointer text-sm text-primary-app"
            @click="activeRender.config.backgroundValue = initialBgColor"
          >重置</span>
        </div>
      </Condition>
      <Condition v-else-if="activeRender.config.background === EWebDesignerComponentBackground.图片" :arrow-left="146">
        <div class="flex flex-row items-end justify-start gap-3">
          <div
            class="image-uploader" :style="{ backgroundImage: `url(${activeRender.config.backgroundValue})` }"
            @click="handleChooseFile"
          >
            <img
              v-if="!activeRender.config.backgroundValue" src="/images/upload-placeholder.png" :width="32"
              :height="32" class="w-32px h-32px block"
            >
          </div>
          <div class="text-xs text-second-app leading-4">
            建议图片宽度750px
          </div>
        </div>
      </Condition>
      <Condition v-else-if="activeRender.config.background === EWebDesignerComponentBackground.主题色" :arrow-left="78">
        <div class="flex flex-row items-center justify-between">
          <div>透明度&nbsp;&nbsp;{{ (activeRender.config.backgroundValue as any) === '1' ? '100%' : '4%' }}</div>
          <RadioGroup v-model:value="activeRender.config.backgroundValue" button-style="solid">
            <RadioButton :value="followThemeValue.deep.toString()">
              深
            </RadioButton>
            <RadioButton :value="followThemeValue.light.toString()">
              浅
            </RadioButton>
          </RadioGroup>
        </div>
      </Condition>
      <div class="mt-14px">
        <div class="inline-control-label mb-14px">
          组件边距
        </div>
        <div class="flex flex-row justify-between items-center mb-14px">
          <div class="text-sm text-second-app" style="padding-left: 1em;">
            移动端
          </div>
          <RadioGroup v-model:value="spaceMobile" @change="handleSpaceModeChange($event, 'mobile')">
            <Radio v-for="option of spaceOptions" :key="option.value" :value="option.value">
              {{ option.label }}
            </Radio>
          </RadioGroup>
        </div>
        <Condition v-if="spaceMobile === SpaceOption.custom" :arrow-left="271">
          <Space direction="vertical" :size="14" class="!w-full">
            <SliderProp v-model:value="activeRender.config.paddingLeft" label="左" />
            <SliderProp v-model:value="activeRender.config.paddingRight" label="右" />
            <SliderProp v-model:value="activeRender.config.paddingTop" label="上" />
            <SliderProp v-model:value="activeRender.config.paddingBottom" label="下" />
          </Space>
        </Condition>
        <div class="flex flex-row justify-between items-center my-14px">
          <div class="text-sm text-second-app" style="padding-left: 1em;">
            电脑端
          </div>
          <RadioGroup v-model:value="spacePC" @change="handleSpaceModeChange($event, 'pc')">
            <Radio v-for="option of spaceOptions" :key="option.value" :value="option.value">
              {{ option.label }}
            </Radio>
          </RadioGroup>
        </div>
        <Condition v-if="spacePC === SpaceOption.custom" :arrow-left="271">
          <Space direction="vertical" :size="14" class="!w-full">
            <SliderProp v-model:value="activeRender.config.paddingLeftPC" label="左" />
            <SliderProp v-model:value="activeRender.config.paddingRightPC" label="右" />
            <SliderProp v-model:value="activeRender.config.paddingTopPC" label="上" />
            <SliderProp v-model:value="activeRender.config.paddingBottomPC" label="下" />
          </Space>
        </Condition>
      </div>
    </Space>
  </div>
</template>

<style lang="less" scoped>
.setting-block {
  @apply mb-6;
}

.field-title {
  color: var(--app-text-color-main);
  @apply font-bold text-sm mb-14px;
}

.field-control {
  color: var(--app-text-color-main);
  @apply flex flex-col gap-2;

  .field-label {
    color: var(--app-text-color-second);
    @apply text-sm;
  }
}

.inline-control {
  @apply flex flex-row gap-8 items-start;

  .inline-control-label {
    color: var(--app-text-color-second);
    @apply text-sm flex-none;
  }

  .inline-control-block {
    color: var(--app-text-color-main);
    @apply text-sm;
  }
}

.color-control-input {
  padding: 0;
  @apply w-6;

  &::-webkit-color-swatch-wrapper {
    @apply w-4 h-4 p-0;
  }
}

.image-uploader {
  width: 80px;
  height: 80px;
  border: 1px solid var(--app-color-border);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  @apply cursor-pointer rounded bg-white flex flex-row justify-center items-center;

  &:hover {
    border-color: var(--app-color-primary);
  }
}
</style>
